<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
	</head>
	<body>
		<div id="test"></div>
		<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
		<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
		<!-- 生产环境中不建议使用 -->
		<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
		
		<script type="text/babel">
			class Weather extends React.Component{
				
				// constructor(props){
				// 	super(props);
				// 	// this.state = {isHot:false,wind:'微风'}
				// 	// this.changeWeather = this.changeWeather.bind(this);
				// }
				
				// 初始化状态
				state = {isHot:false,wind:'微风'}
				render(){
					return <h1 onClick={this.changeWeather}>今天天气{this.state.isHot ? "炎热" : "凉爽"},{this.state.wind}</h1>
				}
				
				// 自定义方法  要用赋值语句的形式 + 箭头函数
				changeWeather = () =>{
					console.log(this);//Weather {props: {…}, context: {…}, refs: {…}, updater: {…}, state: {…}, …}
					const isHot = this.state.isHot
					this.setState({ isHot : !this.state.isHot})
				}
			}
			ReactDOM.render(<Weather/>,document.getElementById("test"));
			
			/*
				state 总结
					1. state是组件对象最重要的属性,值是对象(可以包含多个key-value的组合)
					2. 组件被称为"状态机",通过更新组件的state来更新对应的页面显示(重新渲染组件)
					
					1).组建中render方法中的this为组件实例对象
					2).组件自定义的方法中this为undefined
						1.强制丙丁this通过函数对象的bind()
						2.箭头函数 用赋值语句的形式 + 箭头函数
					3).状态数据,不能直接修改或更新  要通过setState来修改
			*/
		</script>
	</body>
</html>